<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>仪表用量汇总</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="energy-dosage-stat">
      <div>
        <el-form :model="search" label-width="50px" :inline="true">
          <el-form-item label="日期">
            <el-date-picker class="form-input" v-model="search.startDate" type="datetime" value-format="timestamp" :clearable="false"
              :editable="false" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            -
            <el-date-picker class="form-input" v-model="search.endDate" type="datetime" value-format="timestamp" :clearable="false" :editable="false"
              format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">搜索</el-button>
            <el-button type="primary" @click="exportExcel">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="energy-dosage-stat-content">
        <el-table class="exportEnergy" fit border stripe ref="energyTable" :data="statList" style="width: 100%" height="parent">
          <el-table-column :resizable="false" prop="no" label="编号" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="name" label="名称" header-align="center"></el-table-column>
          <el-table-column :resizable="false" prop="address" label="位置" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="用量" align="center">
            <template slot-scope="props">
              <span>{{SysUtil.decimalNumber(props.row.number)}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="期初用量" align="center">
            <template slot-scope="props">
              <span>{{SysUtil.decimalNumber(props.row.startDegee)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px;text-align: right;" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "../base.css"
  ], [
    "https://upload.shinehao.com.cn/20180809103833lodash.js",
    "https://upload.shinehao.com.cn/20190523111638xlsx.full.min.js",
    "https://upload.shinehao.com.cn/20190523111634xlsx-style.full.min.js",
    "https://upload.shinehao.com.cn/20180809110727FileSaver.min.js",
    "/static/excel/Export2Excel.js",
  ]);

</script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var self = this;
      var search = {
        startDate: moment().startOf('day').subtract(1, 'month').valueOf(),
        endDate: moment().endOf('day').valueOf()
      };
      return {
        loading: false,
        SysUtil: SysUtil,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        statList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        }
      };
    },
    created: function () {
      this.setStatList();
    },
    methods: {
      setStatList: function (isSearch) {
        var search = this.search;
        var startDate = search.startDate;
        var endDate = search.endDate;

        if (moment(startDate).isAfter(endDate, 'second')) {
          this.$alert('所选择的开始日期不能晚于结束日期', '信息');
          return;
        }

        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        } else {
          this.pagination.currentPage = 1;
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;

        this.loading = true;
        var self = this;
        ajaxRequest('energy/getEnergyRecordsSum', {
          start: start,
          length: pageSize,
          startDate: moment(startDate).format('YYYY-MM-DD HH:mm:ss'),
          endDate: moment(endDate).format('YYYY-MM-DD HH:mm:ss')
        }).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var statList = res.returnData;
          self.statList = statList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },
      searchData: function () {
        this.setStatList(true);
      },
      pageChange: function () {
        this.setStatList();
      },
      exportExcel: function () {
        export_table_to_excel($(this.$el).find('.exportEnergy'), '仪表', {
          sheetName: 'sheet1',
          colWidth: [220, 90, 150, 80, 80]
        });
      }
    }
  });

</script>
<style>
  .energy-dosage-stat {
    padding: 10px 20px;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
  }

  .energy-dosage-stat .form-input {
    width: 200px;
  }

  .energy-dosage-stat .el-form-item {
    margin-bottom: 10px;
  }

  .energy-dosage-stat .energy-dosage-stat-content {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
